/* eslint-disable */
<template>
  <div class="marketInfoDetail-container">
    <div class="marketInfoDetail-title">市场信息详情</div>
    <div class="marketInfoDetail-body">
      <el-form ref="form" :model="detaildata" label-width="88px" size="mini">
        <div>
          <div class="bluelogo">|</div>基本信息
        </div>
        <div class="infodetail">
          <div class="infolable">市场名称</div>
          <div class="infolableval">{{detaildata.marketName}}</div>
          <div class="infolable">市场编码</div>
          <div class="infolableval">{{detaildata.enterpriseCode}}</div>
          <div class="infolable">行政区域</div>
          <div class="infolableval">{{detaildata.areaName}}</div>
          <div class="infolable">法人代表</div>
          <div class="infolableval">{{detaildata.legalPerson}}</div>
          <div class="infolable">市场星级</div>
          <div class="infolableval">{{detaildata.starLevel}}星级</div>
          <div class="infolable">所属街道</div>
          <div class="infolableval">{{detaildata.street}}</div>
          <div class="infolable">联系人</div>
          <div class="infolableval">{{detaildata.personInCharge}}</div>
          <div class="infolable">举办者性质</div>
          <div class="infolableval">{{detaildata.organizerStateValue}}</div>
          <div class="infolable">详细地址</div>
          <div class="infolableval">{{detaildata.address}}</div>
          <div class="infolable">联系电话</div>
          <div class="infolableval">{{detaildata.phone}}</div>
          <div class="infolable">市场规模</div>
          <div class="infolableval">{{detaildata.area}}m²</div>
          <div class="infolable">GPS坐标</div>
          <div class="infolableval">{{detaildata.lng}},{{detaildata.lat}}</div>
          <div class="infolable">社会统一信用代码</div>
          <div class="infolableval">
            {{detaildata.unifiedSocialCreditCode}}
            <span @click="centerDialogVisible = true">点击查看</span>

            <el-dialog title="营业执照" :visible.sync="centerDialogVisible" width="40%" center>
              <span>
                <img
                  :src="detaildata.businessLicenseImg"
                  alt
                  style="width: auto;height: auto;max-width: 100%;max-height: 100%;"
                />
              </span>
            </el-dialog>
          </div>
          <div class="infolable">摊位数</div>
          <div class="infolableval">{{detaildata.stallNumber}}</div>
          <div class="infolable"></div>
          <div class="infolableval"></div>
        </div>
      </el-form>
    </div>

    <div class="marketInfoDetail-table" id="InfoDetailtab">
      <div>
        <div class="bluelogo">|</div>摊位信息
      </div>
      <el-table :data="tableData" style="width: 100%;color:#000;text-align:center">
        <el-table-column prop="stallName" label="摊位号"></el-table-column>
        <el-table-column prop="partitionName" label="摊位分区"></el-table-column>
        <el-table-column prop="businessTypeValue" label="经营品类"></el-table-column>
        <el-table-column prop="businessName" label="商户名称"></el-table-column>
        <el-table-column prop="phone" label="电话号码"></el-table-column>
        <el-table-column prop="idNumber" label="身份证">
          <template slot-scope="scope">
            <el-popover trigger="click" placement="top">
              <img :src="scope.row.idCardFrontImg" alt style="width:300px;" />
              <div slot="reference" class="name-wrapper">
                <el-tag
                  size="medium"
                  :class="{active:scope.row.idCardFrontImg!=''}"
                >{{ scope.row.idNumber }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>

        <!-- 营业执照 -->
        <el-table-column prop="unifiedSocialCreditCode" label="营业执照">
          <template slot-scope="scope">
            <el-popover trigger="click" placement="top">
              <img :src="scope.row.businessLicenseImg" alt style="width:300px;height:300px" />
              <div>{{ scope.row.unifiedSocialCreditCode }}</div>
            </el-popover>
          </template>
        </el-table-column>

        <!-- 食品经营许可证 -->
        <el-table-column prop="foodBusinessLicenseNumber" label="食品经营许可证">
          <template slot-scope="scope">
            <el-popover trigger="click" placement="top">
              <img :src="scope.row.foodBusinessLicenseImg" alt style="width:300px;height:300px" />
              <div>{{ scope.row.foodBusinessLicenseNumber }}</div>
            </el-popover>
          </template>
        </el-table-column>

        <!-- 健康证 -->
        <el-table-column prop="healthNumber" label="健康证">
          <template slot-scope="scope">
            <div v-on:click="gethealth(scope.row.businessId)">
              <!-- <el-tag
                  size="medium"
                  :class="{active:scope.row.healthNumber>0}" @click="centerDialogVisible1=true" 
                   v-loading.fullscreen.lock="fullscreenLoading">
              {{ scope.row.healthNumber }}</el-tag>-->
              <el-tag
                size="medium"
                :class="{active:scope.row.healthNumber>0}"
              >{{ scope.row.healthNumber }}</el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="健康证" :visible.sync="centerDialogVisible1" width="22%" center>
        <span v-for="item in this.healthdata" :key="item">
          <img
            :src="item"
            alt
            style="width: auto;  
                          height: auto;  
                          max-width: 100%;  
                          max-height: 100%;"
          />
        </span>
      </el-dialog>
      <el-pagination
        align="right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
// import { mapGetters } from "vuex";
import { Loading } from "element-ui";
export default {
  name: "marketInfoDetail",
  computed: {
    // ...mapGetters(['name'])
  },
  data() {
    return {
      form: {
        a: 1
      },
      marketId: 1,
      detaildata: {},
      tableData: [],
      pageSizes: [1, 5, 10, 20],
      totalCount: 1, //个数选择器
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 5, // 每页的数据条数
      isActive: true,
      isActive2: false,
      isActive3: false,
      isActive4: false,
      centerDialogVisible: false,
      centerDialogVisible1: false,
      fullscreenLoading: false,
      healthdata: [],
      loading: true
    };
  },
  created() {},
  mounted() {
    this.marketId = this.$route.query.id;
    this.getDetail();
    // console.log(this.marketId);
    this.getbusiness();
  },
  methods: {
    getDetail() {
      this.$store
        .dispatch("marketInfoMge/getDetail", { marketId: this.marketId })
        .then(data => {
          console.log(data);
          this.detaildata = data;
          // console.log(this.detaildata);
        })
        .catch(err => {
          console.log(err);
        });
    },

    gethealth(businessId) {
      this.$store
        .dispatch("marketInfoMge/gethealth", { businessId: businessId })
        .then(data => {
          // console.log(data);
          this.healthdata = data;
          console.log(this.healthdata);
          if (this.healthdata.length != 0) {
            this.centerDialogVisible1 = false; //测试，理应是true
          } else {
            this.centerDialogVisible1 = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getbusiness() {
      this.$store
        .dispatch("marketInfoMge/getbusiness", {
          marketId: this.marketId,
          perPage: this.pageSize,
          page: this.currentPage
        })
        .then(data => {
          this.tableData = data.items;
          // console.log(this.tableData);
          this.totalCount = data.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1;
      this.getbusiness();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getbusiness();
    },
    tablecell() {
      alert(1);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    getbusinessId(businessId) {
      // console.log(businessId + "....businessId");
      this.gethealth(businessId);
    }
  }
};
</script>

<style lang="scss" scoped>
.marketInfoDetail {
  &-container {
    margin: 20px;
  }
  &-title {
    font-size: 18px;
    line-height: 46px;
    background: white;
    padding-left: 15px;
    margin-bottom: 15px;
  }
  &-body {
    background: white;
    padding: 10px;
    margin-bottom: 15px;
    padding-left: 15px;
  }
  &-table {
    background: white;
    padding: 10px;
    margin-bottom: 10px;
    padding-left: 15px;
  }
}
.infodetail {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  // margin-left: 20px;
  font-size: 14px;
}
.infolable {
  width: 8%;
  text-align: right;
  margin-top: 8px;
}
.infolableval {
  width: 22%;
  color: #444;
  margin-left: 20px;
  margin-top: 8px;
}
.infolableval span {
  color: #409eff;
  text-decoration: underline;
  cursor: pointer;
}
.bluelogo {
  display: inline-block;
  width: 4px;
  color: #004e65;
  background: #004e65;
  margin-right: 10px;
}
::v-deep .el-table th > .cell {
  color: #000;
  font-weight: 400;
}
::v-deep .el-table .cell {
  text-align: center;
  color: #444;
}
::v-deep .el-tag {
  border: none;
  background: none;
  // // text-decoration: underline;
  color: #444;
  // color: #409eff;
  // text-decoration: underline;
  white-space: pre-wrap;
  cursor: pointer;
}
.active {
  color: #409eff;
  text-decoration: underline;
  cursor: pointer;
}
</style>
